<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<uni-icons type="left" size="24" color="#2c3e50"></uni-icons>
				<text class="back-text">返回</text>
			</view>
			<text class="header-title">消息详情</text>
			<view class="header-right" @click="showMoreActions">
				<uni-icons type="more" size="24" color="#2c3e50"></uni-icons>
			</view>
		</view>
		
		<!-- 消息内容 -->
		<scroll-view scroll-y class="message-content">
			<view class="message-header">
				<view class="message-avatar" :class="messageData.type">
					<uni-icons :type="messageData.icon" size="24" color="#ffffff"></uni-icons>
				</view>
				<view class="message-info">
					<text class="message-title">{{ messageData.title }}</text>
					<text class="message-sender">{{ messageData.sender }}</text>
					<text class="message-time">{{ formatDateTime(messageData.time) }}</text>
				</view>
			</view>
			
			<view class="message-body">
				<text class="message-text">{{ messageData.content }}</text>
			</view>
			
			<!-- 附件列表 -->
			<view class="attachment-section" v-if="messageData.attachments && messageData.attachments.length > 0">
				<text class="section-title">附件</text>
				<view class="attachment-list">
					<view class="attachment-item" v-for="(attachment, index) in messageData.attachments" :key="index" @click="downloadAttachment(attachment)">
						<uni-icons type="paperclip" size="20" color="#3498db"></uni-icons>
						<text class="attachment-name">{{ attachment.name }}</text>
						<text class="attachment-size">{{ attachment.size }}</text>
					</view>
				</view>
			</view>
			
			<!-- 相关告警 -->
			<view class="related-alerts" v-if="messageData.relatedAlerts && messageData.relatedAlerts.length > 0">
				<text class="section-title">相关告警</text>
				<view class="alert-list">
					<view class="alert-item" v-for="(alert, index) in messageData.relatedAlerts" :key="index" @click="viewAlert(alert)">
						<view class="alert-level" :class="alert.level">
							<text class="level-text">{{ getLevelText(alert.level) }}</text>
						</view>
						<view class="alert-content">
							<text class="alert-title">{{ alert.title }}</text>
							<text class="alert-desc">{{ alert.description }}</text>
						</view>
						<uni-icons type="right" size="16" color="#7f8c8d"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 回复记录 -->
			<view class="reply-section" v-if="messageData.replies && messageData.replies.length > 0">
				<text class="section-title">回复记录</text>
				<view class="reply-list">
					<view class="reply-item" v-for="(reply, index) in messageData.replies" :key="index">
						<view class="reply-avatar">
							<uni-icons type="person" size="16" color="#ffffff"></uni-icons>
						</view>
						<view class="reply-content">
							<view class="reply-header">
								<text class="reply-sender">{{ reply.sender }}</text>
								<text class="reply-time">{{ formatTime(reply.time) }}</text>
							</view>
							<text class="reply-text">{{ reply.content }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-actions">
			<button class="action-btn secondary" @click="replyMessage">
				<uni-icons type="compose" size="20" color="#3498db"></uni-icons>
				<text>回复</text>
			</button>
			<button class="action-btn secondary" @click="forwardMessage">
				<uni-icons type="redo" size="20" color="#27ae60"></uni-icons>
				<text>转发</text>
			</button>
			<button class="action-btn primary" @click="handleMessage">
				<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
				<text>处理</text>
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const messageData = ref({
	id: '001',
	title: '系统告警',
	content: '监测点003设备离线，请及时处理。设备离线时间：2025-09-22 14:30，离线原因：网络连接中断。请技术人员立即前往现场检查设备状态，并恢复网络连接。',
	sender: '系统管理员',
	time: new Date(),
	type: 'alert',
	icon: 'sound',
	attachments: [
		{ name: '设备状态报告.pdf', size: '2.3MB' },
		{ name: '网络诊断日志.txt', size: '156KB' }
	],
	relatedAlerts: [
		{
			id: '001',
			title: '设备离线',
			description: '监测点003设备连接中断',
			level: 'high'
		},
		{
			id: '002',
			title: '网络异常',
			description: '监测点003网络连接不稳定',
			level: 'medium'
		}
	],
	replies: [
		{
			sender: '技术员张三',
			content: '已收到告警，正在前往现场检查',
			time: new Date(Date.now() - 300000)
		},
		{
			sender: '技术员李四',
			content: '网络已恢复，设备重新上线',
			time: new Date(Date.now() - 600000)
		}
	]
})

// 页面加载
onMounted(() => {
	loadMessageDetail()
})

// 加载消息详情
const loadMessageDetail = () => {
	console.log('加载消息详情...')
	// 实际项目中会从后端API获取数据
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 显示更多操作
const showMoreActions = () => {
	uni.showActionSheet({
		itemList: ['标记重要', '删除消息', '导出消息', '分享消息'],
		success: (res) => {
			console.log('选择操作:', res.tapIndex)
		}
	})
}

// 下载附件
const downloadAttachment = (attachment) => {
	uni.showToast({
		title: `下载 ${attachment.name}`,
		icon: 'none'
	})
}

// 查看告警
const viewAlert = (alert) => {
	uni.navigateTo({
		url: `/pages/alert/detail?id=${alert.id}`
	})
}

// 回复消息
const replyMessage = () => {
	uni.navigateTo({
		url: '/pages/message/compose?replyId=' + messageData.value.id
	})
}

// 转发消息
const forwardMessage = () => {
	uni.showActionSheet({
		itemList: ['转发给技术部', '转发给管理层', '转发给其他部门'],
		success: (res) => {
			uni.showToast({
				title: '转发成功',
				icon: 'success'
			})
		}
	})
}

// 处理消息
const handleMessage = () => {
	uni.showModal({
		title: '处理消息',
		content: '确定要处理此消息吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '处理成功',
					icon: 'success'
				})
			}
		}
	})
}

// 获取告警级别文本
const getLevelText = (level) => {
	const levelMap = {
		low: '低',
		medium: '中',
		high: '高'
	}
	return levelMap[level] || '低'
}

// 格式化日期时间
const formatDateTime = (time) => {
	const date = new Date(time)
	const year = date.getFullYear()
	const month = (date.getMonth() + 1).toString().padStart(2, '0')
	const day = date.getDate().toString().padStart(2, '0')
	const hours = date.getHours().toString().padStart(2, '0')
	const minutes = date.getMinutes().toString().padStart(2, '0')
	return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 格式化时间
const formatTime = (time) => {
	const date = new Date(time)
	const hours = date.getHours().toString().padStart(2, '0')
	const minutes = date.getMinutes().toString().padStart(2, '0')
	return `${hours}:${minutes}`
}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f5f7fa;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #e5e5e5;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.header-left {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.back-text {
	font-size: 28rpx;
	color: #2c3e50;
}

.header-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #2c3e50;
}

.header-right {
	padding: 10rpx;
}

.message-content {
	flex: 1;
	padding: 20rpx;
}

.message-header {
	display: flex;
	align-items: flex-start;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.message-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	
	&.alert {
		background: #e74c3c;
	}
	
	&.maintenance {
		background: #f39c12;
	}
	
	&.report {
		background: #3498db;
	}
	
	&.urgent {
		background: #e74c3c;
	}
	
	&.meeting {
		background: #9b59b6;
	}
}

.message-info {
	flex: 1;
}

.message-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 10rpx;
	display: block;
}

.message-sender {
	font-size: 24rpx;
	color: #7f8c8d;
	margin-bottom: 5rpx;
	display: block;
}

.message-time {
	font-size: 22rpx;
	color: #95a5a6;
}

.message-body {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.message-text {
	font-size: 26rpx;
	color: #2c3e50;
	line-height: 1.8;
}

.attachment-section, .related-alerts, .reply-section {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 20rpx;
	display: block;
}

.attachment-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.attachment-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	transition: all 0.3s;
	
	&:active {
		background: #e9ecef;
	}
}

.attachment-name {
	font-size: 24rpx;
	color: #2c3e50;
	margin-left: 15rpx;
	margin-right: auto;
}

.attachment-size {
	font-size: 22rpx;
	color: #7f8c8d;
}

.alert-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.alert-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	transition: all 0.3s;
	
	&:active {
		background: #e9ecef;
	}
}

.alert-level {
	padding: 6rpx 12rpx;
	border-radius: 15rpx;
	margin-right: 15rpx;
	font-weight: bold;
	
	&.low {
		background: #d5f4e6;
		color: #27ae60;
	}
	
	&.medium {
		background: #fff3e0;
		color: #e67e22;
	}
	
	&.high {
		background: #ffebee;
		color: #e74c3c;
	}
}

.level-text {
	font-size: 20rpx;
	font-weight: bold;
}

.alert-content {
	flex: 1;
}

.alert-title {
	font-size: 24rpx;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 5rpx;
	display: block;
}

.alert-desc {
	font-size: 22rpx;
	color: #7f8c8d;
}

.reply-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.reply-item {
	display: flex;
	align-items: flex-start;
}

.reply-avatar {
	width: 50rpx;
	height: 50rpx;
	background: #3498db;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15rpx;
}

.reply-content {
	flex: 1;
}

.reply-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8rpx;
}

.reply-sender {
	font-size: 24rpx;
	font-weight: bold;
	color: #2c3e50;
}

.reply-time {
	font-size: 20rpx;
	color: #7f8c8d;
}

.reply-text {
	font-size: 24rpx;
	color: #2c3e50;
	line-height: 1.6;
}

.bottom-actions {
	display: flex;
	gap: 15rpx;
	padding: 30rpx;
	background: #ffffff;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.action-btn {
	flex: 1;
	height: 80rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
	font-size: 26rpx;
	font-weight: bold;
	transition: all 0.3s;
	
	&.primary {
		background: #3498db;
		color: #ffffff;
		box-shadow: 0 4rpx 20rpx rgba(52, 152, 219, 0.3);
	}
	
	&.secondary {
		background: #f8f9fa;
		color: #2c3e50;
		border: 2rpx solid #e9ecef;
	}
	
	&:active {
		transform: scale(0.95);
	}
}
</style>
